<template>
  <page-header title="常用观演人" background="#F7F0E6"></page-header>
  <view class="viewer">
    <view class="form">
      <view class="left">姓名:</view>
      <view class="right">
        <input placeholder="请填写观演人姓名" v-model="Data.name" />
      </view>
    </view>
    <view class="form">
      <view class="left">证件类型:</view>
      <view class="right" @tap="open"
        style="display: flex;align-items: center;justify-content: flex-end;font-weight: bold;">
        {{arr[Data.type]}}
        <uni-icons type="bottom" size="18"></uni-icons>
      </view>
    </view>
    <view class="form">
      <view class="left">证件号码:</view>
      <view class="right">
        <input placeholder="请填写证件号码" v-model="Data.idCard" />
      </view>
    </view>
    <view class="form">
      <uni-icons type="info" size="12" color="#A2A2A2"></uni-icons>
      <view class="text">
        点击确定表示您已阅读并同意<text class="tips">《实名须知》</text>
      </view>
    </view>
    <view class="new-address">
      <view class="btn" @tap="addViewer">
        确定
      </view>
    </view>
    <uni-popup ref="popup" background-color="#fff" border-radius="10px 10px 0px 0px">
      <view class="popup">
        <view class="title">选择证件类型</view>
        <view class="content" v-for="(item,index) in arr" :key="index" @tap="close(index)">{{item}}
          <uni-icons type="checkmarkempty" size="18" v-if="index==Data.type"></uni-icons>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
    toRefs
  } from 'vue';
  const arr = ref(['', '身份证', '港澳台居民居住证', '港澳居民来往内地通行证', '台湾居民来往大陆通行证', '护照', '外国人永久居留身份证'])
  const arrIndex = ref(1)
  const popup = ref(null)
  const open = () => {
    popup.value.open('bottom')
  }
  const close = (index) => {
    Data.type = index
    popup.value.close()
  }
  const Data = reactive({
    idCard: '',
    name: '',
    type: 1
  })
  const {
    idCard,
    name,
    type
  } = toRefs(Data)
  const addViewer = () => {
    if (!name.value) {
      uni.showToast({
        title: '请填写观演人姓名',
        icon: 'none'
      })
      return
    }
    if (!idCard.value) {
      uni.showToast({
        title: '请填写证件号码',
        icon: 'none'
      })
      return
    }
    http.request({
      url: '/mall4cloud_user/app/idCard/add',
      method: 'POST',
      data: Data
    }).then(res => {
      uni.showToast({
        title: '添加成功',
        icon: 'none'
      })
      uni.navigateBack()
    })
  }
</script>

<style lang="scss">
  .viewer {
    .form {
      padding: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 34rpx;
      border-bottom: 2rpx dashed #f2f2f2;

      .left {
        color: #A2A2A2;
        width: 200rpx;
      }

      .right {
        flex: 1;
        text-align: right;

        input {
          font-size: 30rpx;
        }
      }

      .text {
        flex: 1;
        color: #A2A2A2;
        font-size: 24rpx;

        .tips {
          color: #78CBF5;
        }
      }
    }

    .new-address {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20rpx 30rpx;
      height: 80rpx;
      line-height: 80rpx;

      .btn {
        color: #5b4523;
        font-size: 26rpx;
        font-weight: 600;
        text-align: center;
        background: #FDE9CE;
        border-radius: 70rpx;
      }
    }

    .popup {
      font-size: 30rpx;
      color: 000;

      .title {
        padding: 30rpx 0;
        text-align: center;
      }

      .content {
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>
